<template>
	<view class="page">
		<view class="navbar" v-if="list.length>0">
			{{current+1}}/{{list.length}}
		</view>
		<view class="content" v-if="list.length>0">
			<view class="swiper">
				<swiper class="swiper-box" :current="current" @change="changeCurrent">
					<swiper-item class="swiper-list" v-for="(item,i) in list" :key="i">
						<view class="swiper-item">
							<view class="question">
								<view class="t" >{{item.wordStr}}</view>
								<wordphonetic :data="item"></wordphonetic>
							</view>
							<view class="answer">
								<block v-for="(an,index) in item.wordList" :key="index" >
									<view class="item" :class="item.isSelect==index?(an.answer?'yes':'no'):''" @click="chooseItem(index,an,item)">
										<view class="as"><text class="zm">{{handleZm(index)}}</text>. {{an.name}}</view>
										<view class="icon" v-if="item.isSelect==index">
											<image v-if="an.answer" src="/static/sec1.png" mode=""></image>
											<image v-else src="/static/error.png" mode=""></image>
										</view>
									</view>
								</block>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view class="no-data" v-else-if="list.length==0&&noData">
			<u-empty mode="list" text="暂无题目数据" icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
		</view>
		<uni-popup ref="popup" type="bottom" :is-mask-click="false" :safe-area="false">
			<view class="pop-con" @touchstart="touchstart" @touchmove="touchmove">
				<view class="explain" :style="{height:height}">
					<Explain :detail="detail" :id="curId" @updateData="getDetail"></Explain>
				</view>
				<view class="btn-box">
					<view class="btn" @click="next">下一题</view>
				</view>
				<!-- <view class="explain" @click="toExplain">查看解析</view> -->
			</view>
		</uni-popup>
		<uni-popup ref="next" type="center">
			<view class="pop-cen">
				<view class="tip">
					真棒！已完成复习单词，是否继续复习？
				</view>
				<view class="btn-box">
					<view class="btn" @click="toIndex">休息一下</view>
					<view class="btn ac" @click="updateWord">我要继续</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import Explain from './explain1.vue';
	import {toneMaps} from '@/util/status.js'
  import {handleExampleSentence} from "@/util/bizUtil";

  export default {
		components:{
			Explain
		},
		data() {
			return {
				toneMaps,
				list:[],
				wordIds:[],
				current:0,
				text:'你太棒了！回答正确',
				noData:false,
				innerAudioContext:'',
				curId:'',
				detail:'',
				initY:0,
				height:'200rpx',
			};
		},
		onLoad() {
			this.innerAudioContext = uni.createInnerAudioContext();
			this.innerAudioContext.autoplay = true;
			this.innerAudioContext.onError(res => {
				console.log(res.errMsg);
				console.log(res.errCode);
			});
			this.getWordList();
		},
		onShow() {},
		methods:{
			touchstart(e){
				this.initY = e.touches[0].pageY;
			},
			touchmove(e){
				let lastY = e.touches[0].pageY;
				console.log(lastY)
				console.log(this.initY)
				if (lastY - this.initY< -20) {
					this.height="calc(100vh - 310rpx)"
				}else if(lastY - this.initY > 20){
					this.height="200rpx"
				}
			},
			/**
			//获取当日的单词
			*/
			getWordList(){
				uni.showLoading();
				this.$http.get1('/api/client/word/graspToday',{
					source:3
				}).then(res=>{
					uni.hideLoading();
					if(res.code==200){
						this.wordIds=res.data.map(val=>{
							return val.id;
						});
						this.getQuestion();
					}
				})
			},
			/**
			// 获取题目
			*/
			getQuestion(){
				uni.showLoading();
				this.$http.post('api/client/word/enDictionQuestion',this.wordIds).then(res=>{
					uni.hideLoading();
					if(res.code==200){
						this.list=res.data.map(val=>{
							val.name = val.wordStr;
							val.isSelect=-1;
							val.isAnswer=false;
							return val;
						});
						this.current=0;
						if(res.data.length==0){
							this.noData=true;
						}
					}
				})
			},
			/**
			// 选择答案 a-所选答案  item-当前题目
			*/
			chooseItem(i,a,item){
				console.log(item);
				if(item.isSelect!=-1){
					return;
				}
				item.isAnswer=true;
				item.isSelect=i;
				this.$refs.popup.open();
				this.curId=item.wordId;
				this.getDetail();
				// if(a.answer){
				// 	this.$refs.popup.open();
				// }else{
				// 	setTimeout(()=>{
				// 		uni.navigateTo({
				// 			url:'/pages/test/explain?id='+item.wordId+'&type=0'
				// 		})
				// 	},1500)
				// }
				this.markWord(item.wordId,a.answer)
			},
			//标记单词
			markWord(id,answer){
				this.$http.get1('api/client/word/signWord',{
					wordId:id,
					source:3,
					answer:answer?true:false,
					// date:new Date(),
				}).then(res=>{
					console.log(res);
				})
			},
			// 查看解析
			toExplain(){
				uni.navigateTo({
					url:'/pagesA/pages/test/explain?id='+this.list[this.current].wordId+'&type=0'
				})
			},
			//下一题
			next(){
				if(this.current<this.list.length-1){
					this.current++;
					this.$refs.popup.close();
					this.height='200rpx'
				}else{
					this.$refs.next.open();
				}
			},
			closeCen(){
				this.$refs.next.close()
				this.$refs.popup.close()
			},
			changeCurrent(e){
				this.current=e.detail.current;
			},
			toIndex(){
				uni.navigateBack();
			},
			updateWord(){
				this.getQuestion();
				this.closeCen();
			},
			//拼读
			spell(item) {
				console.log(item)
				let that = this;
				this.$http
					.gettts('api/client/word/tts', {
						wordStr: item.wordStr,
						langType: 'en'
					})
					.then(res => {
						const fs = wx.getFileSystemManager();
						const basePath = `${wx.env.USER_DATA_PATH}/audio`;
						const audioPath = `${basePath}/${new Date().getTime()}.mp3`;
						let hasFolder = true;
						try {
							fs.accessSync(basePath);
						} catch (e) {
							hasFolder = false;
						}
						// 没有则先创建audio文件夹
						if (!hasFolder) {
							fs.mkdir({
								dirPath: basePath
							});
						}
						fs.writeFile({
							filePath: audioPath,
							data: res,
							encoding: 'binary',
							success: res => {
								that.innerAudioContext.src = audioPath;
								that.innerAudioContext.loop = false;
								that.innerAudioContext.autoPlay = false;
								that.innerAudioContext.onPlay(() => {
									console.log('开始播放');
								});
								setTimeout(()=>{
									that.innerAudioContext.stop();	
								},1000)
							}
						});
					});
			},
			getDetail() {
				this.$http.get1('/api/client/word/wordDetailById', {
					id: this.curId
				}).then(res => {
					if (res.code == 200) {
						this.detail = handleExampleSentence(res.data)
					}
				})
			},
		}
	}
</script>

<style lang="scss">
.navbar{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	font-size: 22rpx;
	color: #333333;
	text-align: center;
	height: 96rpx;
	background: #F9FBFF;
	box-shadow: 0rpx 4rpx 8rpx 2rpx rgba(42,65,152,0.05);
	line-height: 96rpx;
	position: fixed;
	z-index: 9;
	text{
		color: #5480F8;
		margin: 0 8rpx;
	}
}
.content{
	min-height: 100vh;
	padding-top: 120rpx;
	background-color: #F2F3F8;
	.swiper-box{
		height: calc(100vh - 180rpx);
		background-color: #F2F3F8;
		border-radius: 20rpx;
		box-sizing: border-box;
		.swiper-list{
			height: calc(100vh - 180rpx);
			padding:0 32rpx;
			box-sizing: border-box;
		}
	}
}
.swiper-item{
	height: 100%;
	background-color: #fff;
	box-sizing: border-box;
	border-radius: 20rpx;
	padding:30rpx;
	.question{
		min-height: 300rpx;
		font-weight: bold;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		.t{
			margin-bottom: 20rpx;
			color: #333333;
			font-size: 36rpx;
		}
		.yb{
			position: relative;
			top:300;
			font-size: 28rpx;
			color: #575A64;
			font-weight: 400;
			display: flex;
			align-items: center;
			justify-content: center;
			image{
				margin-left: 30rpx;
				width: 32rpx;
				height: 32rpx;
			}
		}
	}
	.answer{
		.item{
			width: 100%;
			height: 120rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			opacity: 1;
			border: 2rpx solid #E4E5EC;
			display: flex;
			align-items: center;	
			padding: 20rpx 28rpx;
			box-sizing: border-box;
			margin-bottom: 30rpx;
			justify-content: space-between;
			font-size: 28rpx;
			color: #575A64;
			
			.as{
				display: -webkit-box;
				word-break: break-all;
				text-overflow:ellipsis;
				overflow: hidden;
				white-space: pre-line;
				-webkit-box-orient: vertical;
				-webkit-line-clamp:3;
			}
			&.yes{
				border: 1rpx solid #20CE7C;
				background: #F5FBF6;
			}
			&.no{
				background: #FFF8F8;
				border: 1rpx solid #FF7474;
			}
			.icon{
				width:40rpx;
				height: 40rpx;
			}
		}
		.zm{
			font-size: 36rpx;
		}
	}
}
.pop-con{
	width: 100%;
	background-color: #fff;
	padding: 30rpx 0;
	box-sizing: border-box;
	transition: all 600ms;
	border-radius: 20rpx 20rpx 0 0;
	.tip{
		font-size: 24rpx;
		color: #20CE7C;
		text-align: center;
	}
	.btn-box{
		height: 140rpx;
		border-top: 1rpx solid #eaeaea;
		padding:0 30rpx;
		box-sizing: border-box;
	}
	.btn{
		width: 680rpx;
		height: 90rpx;
		background: #5480F8;
		border-radius: 46rpx;
		text-align: center;
		line-height: 90rpx;
		color: #fff;
		font-size: 32rpx;
		font-weight: 500;
		color: #FFFFFF;
		margin: 20rpx auto 30rpx;
	}
	.explain{
		transition: all 800ms;
		font-size: 24rpx;
		overflow: hidden;
		color: #5480F8;
		text-align: center;
	}
}
.pop-cen{
	width: 590rpx;
	background: #FCFDFF;
	border-radius: 20rpx;
	padding: 30rpx 40rpx 40rpx;
	box-sizing: border-box;
	.tip{
		margin: 40rpx 0;
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
	}
	.btn-box{
		display: flex;
		justify-content: space-between;
		align-items: center;
		.btn{
			width: 240rpx;
			height: 90rpx;
			border-radius: 46rpx;
			border: 2rpx solid #5480F8;
			text-align: center;
			line-height: 90rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: #5480F8;
			&.ac{
				background-color: #5480F8;
				color: #fff;
			}
		}
	}
}

</style>
